<template>
  <div class="header">
    <el-row>
        <el-col :span="2" class="header-nav">
            <el-button text @click="router.push({ path: '/home'})">首页</el-button>
        </el-col>
      <el-col :offset="16" :span="2" class="header-nav">
        <el-button :icon="User" text @click="showStudentInfoDialog = true">
          {{ user.name.length == 0 ? user.studentId : user.name }}
        </el-button>
      </el-col>
      <el-col :span="2" class="header-nav">
        <el-button :icon="Document" text @click="router.push({ path: '/resume'})">简历</el-button>
      </el-col>
<!--      <el-col :span="2" class="header-nav">-->
<!--        <el-button :icon="Collection" text>收藏</el-button>-->
<!--      </el-col>-->
      <el-col :span="2" class="header-nav">
        <el-button :icon="SwitchButton" text @click="logout">退出</el-button>
      </el-col>
    </el-row>
  </div>
  <div>
    <el-dialog v-model="showStudentInfoDialog" append-to-body width="50%">
      <StudentInfo :student="user" @updateStudent="updateStudentHandle"></StudentInfo>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>

import router from "@/router";
import {Collection, Document, SwitchButton, User} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import type {ResponseInterface, StudentInterface} from "@/model/type";
import {getStudentInfoByTokenAPI} from "@/api/UserAPI";
import StudentInfo from "@/components/home/StudentInfo.vue";

let user = reactive<StudentInterface>({
  birthDay: "",
  address: "",
  email: "",
  name: "",
  phone: "",
  school: "",
  sex: 0,
  studentId: "", id: "", userType: "STUDENT"
})

let showStudentInfoDialog = ref<boolean>(false)

function updateStudentHandle(student: StudentInterface) {
  Object.assign(user, student)
}

function logout() {
  localStorage.clear();
  router.push({path: "/login"})
}

onMounted(async () => {
  let r: ResponseInterface = await getStudentInfoByTokenAPI(localStorage.getItem("token"))
  if (r.code == 200) {
    Object.assign(user, r.data)
    localStorage.setItem("userType", user.userType)
    localStorage.setItem("user", JSON.stringify(user))
  }
})
</script>

<style scoped>
.header {
  height: 35px
}

.header-nav {
  text-align: center;
  line-height: 30px;
}
</style>